<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-08-29 11:12:49
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-13 18:21:37
 * @FilePath: /XMate-h5/src/views/customer/customerDetail/components/competition/competitionNavTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="nav-bar flex flex-row mr-4 pb-4 overflow-x-auto">
    <template v-for="(item, i) in tabs" :key="i">
      <div
        @click="onClickItem(i)"
        :class="`mr-4 py-3 pl-4 min-w-[155px] bg-[#F9FAFC] rounded-lg cursor-pointer hover:bg-yxt-blue-light ${
          active === i ? 'active-item' : ''
        }`"
      >
        <h4 class="text-base font-medium mb-2">{{ item.title }}</h4>
        <p class="text-xs">被提及{{ item.count }}次</p>
      </div>
    </template>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const emits = defineEmits(["update:active"]);
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  active: {
    type: Number,
    default: 1,
  },
});

function onClickItem(i) {
  // todo: 将该控件滑动到中间位置
  emits("update:active", i);
}
</script>

<style lang="less" scoped>
.active-item {
  color: #436bff;
  background-color: #f1f3fb;
  border: 1px solid #436bff;
}

.nav-bar::-webkit-scrollbar {
  display: none;
}
</style>
